<template>
	<div id="commentTitle">
		<div id="left">全部评论 <span>{{info}}</span></div>
		<div id="right" @click="changeArrangeMent">{{text}}</div>
	</div>
</template>

<script>
	export default {
		props: ['info'],
		data() {
			return {
				text: '按时间正序'
			}
		},
		methods: {
			changeArrangeMent() {
				if (this.text == '按时间倒序') {
					this.text = '按时间正序'
				} else {
					this.text = '按时间倒序'
				}
				this.$emit('changeArrangeMent')
			}
		}
	}
</script>

<style>
	#commentTitle {
		display: flex;
		width: calc(100% - 32px - 20px - 4px);
		margin: 0 16px;
		padding: 0 10px;
		border-left: 4px solid #996699;
		justify-content: space-between;
		height: 23px;
		line-height: 23px;
	}

	#commentTitle #left {
		font-weight: bold;
		font-size: 18px;
	}

	#commentTitle #left span,
	#commentTitle #right {
		font-size: 14px;
		font-weight: normal;
	}

	#commentTitle #right {
		cursor: pointer;
		user-select: none;
	}
</style>
